<template>
  <div class="wraper clearBoth">
      <p class="prompt">
				温馨提示：您当前共购买{{maxCount}}个实时转写名额，已使用{{this.agentChecked.length}}个，剩余{{maxCount - this.agentChecked.length}}个。
				<!--温馨提示：您当前共购买 &nbsp;<el-input-number v-model="maxCount" :min="0" :max="9999" size="mini"></el-input-number>&nbsp;个实时转写名额，已使用{{this.agentChecked.length}}个，剩余{{maxCount - this.agentChecked.length}}个。-->
				<!-- <template v-if="deleteAgents.length">
					<br>
					到期提醒：座席{{deleteAgents.join(', ')}}，因到期未续费已停用实时转写功能，请及时续费！
				</template> -->
			</p>
      <span class="label">{{$t('public.pickAgent')}}</span>
      <agent-tree-select
				style="width: 290px"
				ref="agentTree"
				class="agent-tree"
				:forChannelConfig="true"
				:disabled="disabled"
				:agentCheckedIds="agentCheckedIds"
				@agent-change="handleAgentChange">
      </agent-tree-select>
			<div class="agent-list">
				<div>
					<span>已选 {{this.agentChecked.length}} 名座席</span> <el-button type="text" @click="clear" size="mini" class="clear">清空</el-button>
				</div>
				<el-tag v-for="(item, index) in agentChecked"
					closable
          :key="index"
					effect="plain"
					class="no-border"
					@close="close(index)"
					type="info">
					{{item.displayName}}[{{item.exten}}]
				</el-tag>
			</div>
			<el-button type="primary" @click="save" class="primary_btn fr">保存</el-button>
  </div>
</template>
<script>
  import AgentTreeSelect from '@/components/public-modules/agent-tree/AgentTreeSelect'
  export default {
    name: 'remoteControlAgents',
    data () {
      return {
				agentChecked: [],
				maxCount: 0
				// deleteAgents: []
      }
    },
    computed: {
			agentCheckedIds () {
				return this.agentChecked.map((item) => {
					return item._id
				})
			},
			disabled () {
				return this.agentChecked.length >= this.maxCount
			}
    },
    components: {
      AgentTreeSelect
		},
    methods: {
      handleAgentChange (checkedAgents) {
        this.agentChecked = checkedAgents.slice(0, this.maxCount)
			},
			close (index) {
				this.agentChecked.splice(index, 1)
			},
			clear () {
				this.agentChecked = []
			},
			save () {
				this.$store.dispatch('updateTranslationConfig', {configType: 'assignAgent', uids: this.agentCheckedIds, sumAgent: this.maxCount}).then((res) => {
					if (res.success) {
						this.$message.success('保存成功')
					}
				})
			},
			getConfig () {
        this.$store.dispatch('getCache', {type: 'translationConfig'}).then((res) => {
          if (res.sumAgent) {
            let agents = this.$agentsMap()
            this.agentChecked = (res.uids || []).map((item) => {
              let {_id, displayName, exten} = agents[item] || {}
              return {_id, displayName, exten}
            })
            this.maxCount = res.sumAgent
          }
        })
			}
    },
    beforeMount () {
      this.getConfig()
    }
  }
</script>
<style lang="stylus" scoped>
	@import "../../../../../assets/common.styl"
	.wraper
		padding 0 20px 20px
		.prompt
			color $c-prompt
			padding 12px 0 20px
		.label
			display block
			padding-bottom 6px
		.agent-list
			padding-top 20px
			padding-bottom 20px
			margin-top 20px
			border-top 1px solid $c-border1
		.clear
			margin-left 20px
		.no-border
			margin-right 40px
			border none
			padding 0
			color $cf-gray0
</style>
